<template>
  <div class="menu-wrapper">
    <div
      class="menu-container"
      @mouseenter="show = true"
      @mouseleave="show = false"
    >
      <div class="menu-entry">
        全部分类
        <el-icon class="arrow-icon"><ArrowDown /></el-icon>
      </div>
      <div
        class="reserve-seat"
        @mouseenter="reserveHover = true"
        @mouseleave="reserveHover = false"
        :class="{ hover: reserveHover }"
      >
        预约订座
      </div>

      <div class="menu-dropdown" v-if="show">
        <div class="menu-left">
          <div
            v-for="(second, key) in menuData['全部分类']"
            :key="key"
            class="menu-left-item"
            :class="{ active: activeMain === key }"
            @mouseenter="activeMain = key"
          >
            {{ key }}
          </div>
        </div>

        <div class="menu-right" v-if="activeMain">
          <div
            v-for="(third, subKey) in menuData['全部分类'][activeMain]"
            :key="subKey"
            class="menu-right-item"
          >
            <div class="submenu-title">{{ subKey }}</div>
            <div class="submenu-content">
              <span
                v-for="item in third"
                :key="item"
                class="submenu-link"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 橙色横线独立放置 -->
  <div class="bottom-line"></div>
</template>

<script setup>
import { ref } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

const show = ref(false);
const reserveHover = ref(false);
const activeMain = ref("美食");

const menuData = {
  全部分类: {
    美食: {
      火锅: ["本帮江浙菜", "日本菜", "咖啡厅", "自助餐", "韩国料理"],
      面包甜点: ["西餐", "烧烤", "东南亚菜", "东北菜", "新疆菜"],
      小吃快餐: ["粤菜", "川菜", "湘菜", "云南菜", "素菜"],
    },
    休闲娱乐: {
      足疗: ["KTV", "咖啡厅", "日本菜", "自助餐", "韩国料理"],
      KTV: ["本帮江浙菜", "西餐", "烧烤", "东南亚菜", "东北菜"],
    },
    结婚: {
      婚纱摄影: ["婚礼策划", "咖啡厅", "日本菜", "自助餐", "韩国料理"],
      婚礼策划: ["火锅", "面包甜点", "小吃快餐", "粤菜", "川菜"],
    },
    电影演出赛事: {
      电影院: ["咖啡厅", "日本菜", "自助餐", "韩国料理", "西餐"],
      演唱会: ["摇滚现场", "流行演出", "民谣音乐会"],
      赛事: ["篮球比赛", "足球比赛", "电竞赛事"],
    },
    丽人: {
      美发: ["剪发", "烫染", "造型", "头皮护理"],
      美甲美睫: ["美甲", "美睫", "手部护理"],
      医学美容: ["微整形", "皮肤管理", "注射美容"],
    },
    酒店: {
      高星酒店: ["五星级", "四星级", "度假酒店"],
      经济连锁: ["如家", "汉庭", "7天连锁", "锦江之星"],
    },
    亲子: {
      早教中心: ["亲子早教", "启蒙教育", "音乐启蒙"],
      儿童摄影: ["满月照", "百天照", "成长记录"],
    },
    周边游: {
      景点: ["古镇", "山川湖泊", "主题乐园"],
      农家乐: ["采摘", "烧烤", "户外露营"],
    },
  },
};
</script>

<style scoped>
.menu-wrapper {
  width: 100vw;
  box-sizing: border-box;
  position: relative;
}

.menu-container {
  position: relative;
  display: inline-block;
  font-family: PingFangSC, sans-serif;
  margin-left: 9%; /* 保持菜单左偏移 */
}

/* 全部分类按钮 */
.menu-entry {
  padding: 0 15px;
  width: 195px;
  height: 35px;
  background: #f60;
  border: 1px solid #f60;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  user-select: none;
}

.arrow-icon {
  color: #fff;
  font-size: 16px;
  margin-left: auto;
}

.reserve-seat {
  position: absolute;
  left: 305px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  padding: 0 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  white-space: nowrap;
  z-index: 20;
}

.reserve-seat.hover,
.reserve-seat:hover {
  color: #f60;
  background-color: #fff;
}

.menu-dropdown {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.menu-left {
  width: 120px;
  background: #f8f8f8;
  border-right: 1px solid #e5e5e5;
}

.menu-left-item {
  padding: 10px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.menu-left-item.active,
.menu-left-item:hover {
  background: #fff;
  font-weight: bold;
  color: #f60;
}

.menu-right {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-right-item {
  display: flex;
  flex-direction: column;
}

.submenu-title {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

.submenu-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.submenu-link {
  font-size: 12px;
  color: #666;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f3f3f3;
  cursor: pointer;
}

.submenu-link:hover {
  background-color: #fceecf;
  color: #f60;
}

/* 橙色横线，宽度全屏，不影响菜单位置 */
.bottom-line {
  height: 2px;
  width: 100vw;
  background-color: #f60;
  margin-top: 0;
  position: relative; /* 相对于页面流，保证菜单位置不变 */
  left: 0;
  z-index: 0; /* 横线放在最底层 */
}
</style>
